<template>
    <div class="sifter-box flex-row-center" v-if="isEdit==0">
        <el-form :inline="true" :model="sifterForm" class="demo-form-inline">
            <el-form-item label="筛选：">
                <el-input v-model="sifterForm.key" placeholder="输入视频课程关键字" @input="proxy.$utils.debounce(updalist,sifterForm)"></el-input>
            </el-form-item>
        </el-form>
        <div>
        </div>
    </div>

    <div class="listDiv" v-if="isEdit==0">
        <div class="flex-row al-flex-start wrap pl20 pt20" style="align-content:flex-start;min-height:700px;">
            <div v-for="(v,i) in list" :key="i" class="flex-column mb15 mr15">
                <el-image style="width: 200px; height: 110px" class="pointer" @click="editData(v)" fit="cover" :src="fileurl+ '/video/'+ v.cover">
                        <template #error>
                            <div class="image-slot">
                                <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                            </div>
                        </template>
                    </el-image>
                <span class="base-size weight mt10 lineTwo">{{v.name||''}}</span>
            </div>
        </div>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[12, 24, 48, 96]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

    <div class="edit-box" v-if="isEdit!=0">
        <div class="title-box flex-row-center">
            <span class="pointer return flex-row-center mr10" @click="re_turn"><el-icon><back /></el-icon></span>
            <span>视频课程详情</span>
        </div>
        <div class="form-box">
            <vue3VideoPlay v-bind="videoOptions" poster=""/>
            <div class="large-size weight mb10 mt10 ml10">{{detail.name||''}}</div>
            <div class="line mb20"></div>
            <div v-html="detail.msg" class="mt20 v-html"></div>
        </div>
    </div>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw } from 'vue'
    import { Back,Edit,Delete,Timer,Phone,User } from '@element-plus/icons-vue'
    // import "vue3-video-play/dist/style.css";
    // import videoPlay from "vue-video-play";
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        fileurl: proxy.$setting.globalUrl.fileurl,
        isEdit: 0,
        total: 0,
        list:[],
        sifterForm: {
            key: '',
            currentpage: 1,
            pagesize: 12
        },
        detail: {},
        videoOptions: {
            width: "860px", //播放器高度
            height: "480px", //播放器高度
            color: "#409eff", //主题色
            title: "", //视频名称
            src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
            muted: false, //静音
            webFullScreen: false,
            speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
            autoPlay: false, //自动播放
            loop: false, //循环播放
            mirror: false, //镜像画面
            ligthOff: false, //关灯模式
            volume: 1, //默认音量大小
            control: true, //是否显示控制
            controlBtns: [
                "audioTrack",
                "quality",
                "speedRate",
                "volume",
                "setting",
                "pip",
                "pageFullScreen",
                "fullScreen",
            ], //显示所有按钮,
        }
    });

    const typeChange = (e,key)=>{
        if(e){
            sifterForm.value[key] = e
            updalist(obj.sifterForm)
        }else{
            sifterForm.value[key] = ''
            updalist(obj.sifterForm)
        }
    }
    
    const datePickerChange = (e)=>{
        console.log(e);
        
        sifterForm.value.starttime = e?e[0]:''
        sifterForm.value.endtime = e?e[1]:''
        updalist(sifterForm.value)
    }

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'video/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    const re_turn = ()=>{
        isEdit.value = 0;
    }

    const editData = (item)=>{
        console.log(item);
        if(item){
            proxy.$ajax({url: 'video/get',data:{video_id:item.video_id},bfLoading: true}).then(d => {
                console.log(d);
                if(d.success){
                    detail.value = d.msg
                    videoOptions.value.src = fileurl.value+ '/video/' + d.msg.src
                    isEdit.value = 3
                }else{proxy.elMessageMixin(date.err, 'error')}
            }).catch(e => {
                console.log(e)
                if(e == "登录已过期，请重新登录"){
                    proxy.routerPushMixin('/')
                }
            })
        }
    }

    const sign = (id)=>{
        if(id){
            proxy.$ajax({url: 'train/sign',data:{train_id:id},bfLoading: true}).then(d => {
                console.log(d);
                if(d.success){
                    proxy.elMessageMixin('报名成功！', 'success')
                    updalist()
                }else{proxy.elMessageMixin(date.err, 'error')}
            }).catch(e => {
                console.log(e)
                if(e == "登录已过期，请重新登录"){
                    proxy.routerPushMixin('/')
                }
            })
        }
    }
    
    let { list, sifterForm, isEdit, total, fileurl, detail,videoOptions } = toRefs(obj)
</script>

<style lang="scss" scoped>
    .list-box{flex-wrap: wrap;}
</style>